import styled from 'styled-components'

import MyHeader from '@/components/Layout/MyHeader.jsx'
import MyAside from '@/components/Layout/MyAside.jsx'

import { Outlet, useNavigate } from 'react-router-dom'
import { useEffect } from 'react'

const Wrapper = styled.div`
  height: 100%;
  display: flex;
  flex-direction: column;

  .home-main-box {
    height: 100%;
    display: flex;
    .home-main-body {
      padding: 15px;
      flex: 1;
    }
  }
`

export default function Main() {
  const navigate = useNavigate()

  // 基于 useEffect + useNavigate 实现路由重定向
  useEffect(() => {
    navigate('/users', { replace: true })
    // eslint-disable-next-line
  }, [])

  return (
    <Wrapper>
      {/* 头部组件 */}
      <MyHeader></MyHeader>
      <div className="home-main-box">
        {/* 侧边栏组件 */}
        <MyAside></MyAside>
        {/* 类名是 home-main-body 的 div，是后台主页的主体区域 */}
        {/* 匹配到的子组件，应该放到这个 div 中展示 */}
        <div className="home-main-body">
          {/* 子路由的占位符 */}
          <Outlet />
        </div>
      </div>
    </Wrapper>
  )
}
